<template>
  <div class="song_liat_header flex-between flex-middle">
    <div class="left flex">
      <p
        :class="['til flex-middle',{'active':hightTab===ind}]"
        v-for="(til,ind) in title"
        :key="til+ind"
        @click="handleClick(ind)"
      >
        {{til}}
        <i />
      </p>
    </div>
    <div class="right">
      <div @click="btnClick" class="btn">{{btnText}}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hightTab: this.defaultIndex
    };
  },
  props: {
    defaultIndex: {
      type: Number,
      default: 0
    },
    title: {
      type: Array,
      default: []
    },
    btnText: {
      type: String,
      default: ""
    }
  },
  methods: {
    handleClick(index) {
      this.hightTab = index;
      this.$emit("titleClick", index);
    },
    btnClick() {
      this.$emit("btnClick");
    }
  }
};
</script>

<style lang="scss" scoped>
.song_liat_header {
  padding: 10px 0;
}
.left {
  align-items: flex-end;
}
.til {
  font-size: 13px;
  color: $senColor;
  &.active {
    font-size: 15px;
    color: $higColor;
  }
  i {
    display: block;
    margin: 0 7px;
    height: 10px;
    width: 1px;
    background: $lowColor;
    margin-top: 5px;
  }
  &:last-child {
    i {
      display: none;
    }
  }
}
.btn {
  padding: 4px 12px;
  color: $higColor;
  @include border(solid, $borderLineColor, 40px);
}
</style>